<%@page import="entityBeans.Contact"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Main page</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
</head>
<body>
	<!-- Header -->
	<div class="container">
		<br />
		<h1 class="text-center">Major Donut Outbreak Consequences</h1>
		<br />
	</div>
	<!-- Header end-->
	<!-- Navigation bar -->
	<div class="container">
		<div class="navbar alert-success col-md-12" role="navigation">
			<ul class="nav navbar-nav navbar-right">
				<li><a data-toggle="modal" data-target="#myModal"><span
						class="glyphicon glyphicon-plus"></span> Add new group</a></li>
			</ul>
		</div>
	</div>
	<!-- Navigation bar end-->
	<!-- Body -->
	<div class="container">
		<div class="panel panel-success">
			<div class="panel-heading">Contact groups list</div>
			<div class="panel-body">
				<div class="panel">
					<div class="panel-body alert-danger">
						<span class="glyphicon glyphicon-warning-sign"></span> Deleting a
						contact group will not delete the contacts in this group. It will
						remove the contacts from the specific group and then delete the
						group. So fear not ! And go on !
					</div>
				</div>

				<table class="table table-bordered">
					<tr class="alert-warning">
						<td class="col-md-2">Group name</td>
						<td class="col-md-9">Members</td>
						<td class="col-md-1"></td>
					</tr>
					<c:forEach items="${ContactGroups}" var="group">
						<tr>
							<td>${group.groupName}</td>
							<td><c:forEach items="${group.listOfContacts}" var="cont">
								${cont.firstName} ${cont.lastName},
							</c:forEach></td>
							<td>
								<form method="post" action="DeleteContactGroup">
									<button type="submit" class="btn btn-danger">
										<span class="glyphicon glyphicon-remove"></span> Delete
									</button>
									<input type="hidden" name="grid" value="${group.id }" />
								</form>
							</td>
						</tr>
					</c:forEach>
				</table>
			</div>
		</div>

		<!-- New group modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">Add a contact
							category</h4>
					</div>
					<div class="modal-body">
						<form method="post" action="AddContactGroup">
							<div class="form-group form-vertical">
								<label class="control-label col-md-2">Groupname</label>
								<div class="col-md-6">
									<input class="form-control" type="text" name="new_group"
										required>
								</div>
								<button type="submit" class="col-md-3 btn btn-success">
									<span class="glyphicon glyphicon-plus pull-left"></span>Add new
									group
								</button>
								<input name="previous" value="manageGroups" type="hidden" />
							</div>

						</form>
						<br />
					</div>
					<div class="modal-footer"></div>
				</div>
			</div>
		</div>

		<!-- Bottom navigation bar -->
		<div class="navbar alert-success col-md-12">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="LoadContacts">Back to main page</a></li>
			</ul>
		</div>
		<!-- End bottom navigation bar -->
	</div>
	<!-- Body end -->
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>